<template>
	<view class="typePopupPage">
		<uni-popup ref="typePopup" :is-mask-click="true">
			<view class="popup-content">
				<view class="popupPage">
					<view class="popupHead">
						<view @click="closePopup" style="color: rgba(183, 183, 183, 1.0);">取消</view>
						<view @click="surePopup" style="color: rgba(6, 85, 255, 1.0);">保存</view>
					</view>
					<view class="popupContent">
						<view class="content">
							<view class="ischooseBlock">
								<view class="blockTitle">
									<view>已选类型</view>
									<view @click="canDelShow" style="color: rgba(20, 91, 245, 1.0);text-decoration:underline;">{{canDelStr}}</view>
								</view>
								<view class="blockContent">
									<view class="contentItem" v-for="(item,index) in isChooseList" :key="item.id">
										<view v-if="!canDel" class="delBtn" @click="changeChoose(item.id)">-</view>
										<view v-if="canDel" class="delBtn" @click="delItem(item.id)">×</view>
										<view v-if="!canDel">
											<view class="topBtn" @click="goTop(item.id)" v-if="item.istop === 0">↥</view>
											<view class="bomBtn" @click="goBom(item.id)" v-else>↧</view>
										</view>
										{{item.type}}
									</view>
								</view>
							</view>
							<view class="notchooseBlock">
								<view class="blockTitle">更多类型</view>
								<view class="blockContent">
									<view class="contentItem" v-for="(item,index) in functionList" :key="item.id" v-if="!item.choose">
										<view v-if="!canDel" class="addBtn" @click="changeChoose(item.id)">+</view>
										<view v-if="canDel" class="delBtn" @click="delItem(item.id)">×</view>
										{{item.type}}
									</view>
									<view @click="inputDialogToggle" class="contentItem" style="font-size: 80rpx;border: 3rpx dashed rgba(78, 60, 117, 0.4);background-color: rgba(245, 245, 245, 1);">
										+
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="输入账单类型" value=""
				placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				parent: null,
				functionList:[],
				functionJson: {},
				isChooseList:[],
				notChooseList:[],
				newtypeName: '',
				canDel: false,
				canDelStr: '菜单管理'
			}
		},
		mounted() {
			
		},
		methods:{
			delItem(key){
				this.functionList.splice(this.functionJson[key].index,1)
				this.classification()
			},
			canDelShow(){
				this.canDel = !this.canDel
				if(this.canDel){
					this.canDelStr = '退出管理'
				}else{
					this.canDelStr = '菜单管理'
				}
			},
			dialogInputConfirm(val){
				this.newtypeName = val
				this.newtypeName = this.newtypeName.replace(/\s*/g,"")
				if(this.newtypeName.length > 4){
					uni.showToast({
						title: '账单类型超过4位数',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if(this.newtypeName.length === 0){
					uni.showToast({
						title: '账单类型未填写',
						icon: 'none',
						duration: 1000
					})
					return
				}
				let obj = {
					id:this.functionList.length + 1,
					type:this.newtypeName,
					choose:false,
					typeChoose: false,
					istop:0
				}
				let reData = false
				for(let i in this.functionList){
					if(this.newtypeName == this.functionList[i].type){
						uni.showToast({
							title: '账单类型已存在',
							icon: 'none',
							duration: 1000
						})
						reData = true
						break
					}
				}
				if(reData){
					return
				}
				for(let i in this.functionList){
					this.functionList[i].id = i
				}
				this.functionList.push(obj)
				this.newtypeName = ''
				// uni.setStorageSync('typeData', JSON.stringify(this.functionList))
				this.getRegionLists()
				this.$forceUpdate()
				this.$refs.inputClose.close()
			},
			inputDialogToggle(){
				this.$refs.inputDialog.open()
			},
			getRegionList(dataList){
				this.parent = dataList
				let value = uni.getStorageSync('typeData');
				if (value) {
					this.functionList = JSON.parse(value)
				}else{
					uni.setStorageSync('typeData', JSON.stringify(dataList));
					uni.setStorageSync('canChooseTypeData', JSON.stringify(dataList))
					this.functionList = dataList
				}
				// this.functionList = dataList
				this.getRegionLists()
				this.$refs.typePopup.open('bottom')
			},
			getRegionLists(){
				for(let i in this.functionList){
					this.functionList[i].index = i
					this.functionJson[this.functionList[i].id] = this.functionList[i]
				}
				this.classification()
			},
			surePopup(){
				let dataList = []
				for(let i in this.functionList){
					if(this.functionList[i].choose){
						dataList.push(this.functionList[i])
					}
				}
				for(let i = 0; i < dataList.length; i++){
					for(let j = 0; j < dataList.length; j++){
						if(dataList[i].istop > dataList[j].istop){
							let temp = dataList[i]
							dataList[i] = dataList[j]
							dataList[j] = temp
						}
					}
				}
				uni.setStorageSync('canChooseTypeData', JSON.stringify(dataList))
				uni.setStorageSync('typeData', JSON.stringify(this.functionList));
				this.canDel = false
				this.canDelStr = '菜单管理'
				this.$refs.typePopup.close()
				uni.showToast({
					title: '保存成功',
					icon: 'none',
					duration: 1000
				})
				if(this.parent === 1){
					return
				}
				this.$parent.getTypeList();
			},
			closePopup(){
				this.canDel = false
				this.canDelStr = '菜单管理'
				this.$refs.typePopup.close()
				uni.showToast({
					title: '取消更改',
					icon: 'none',
					duration: 1000
				})
			},
			classification(){
				this.isChooseList = []
				this.notChooseList = []
				for(let i = 0;i < this.functionList.length; i++){
					if(this.functionList[i].choose){
						this.isChooseList.push(this.functionList[i])
					}else{
						this.notChooseList.push(this.functionList[i])
					}
				}
				for(let i = 0; i < this.isChooseList.length-1; i++){
					for(let j = 0; j < this.isChooseList.length-1; j++){
						if(this.isChooseList[j].istop < this.isChooseList[j+1].istop){
							let obj = this.isChooseList[j]
							this.isChooseList[j] = this.isChooseList[j+1]
							this.isChooseList[j+1] = obj
						}
					}
				}
				for(let i = 0; i < this.isChooseList.length; i++){
					if(this.isChooseList[i].istop > 0){
						this.isChooseList[i].istop = this.isChooseList.length - i
						this.functionList[this.functionJson[this.isChooseList[i].id].index] = this.isChooseList[i]
					}
				}
			},
			changeChoose(key){
				this.functionList[this.functionJson[key].index].choose = !this.functionList[this.functionJson[key].index].choose
				this.functionList[this.functionJson[key].index].istop = 0
				this.classification()
			},
			goTop(key){
				this.functionList[this.functionJson[key].index].istop = this.isChooseList[0].istop + 1
				this.classification()
			},
			goBom(key){
				this.functionList[this.functionJson[key].index].istop = 0
				this.classification()
			}
		},
	}
</script>

<style>
	.typePopupPage{
		position: fixed;
		z-index: 999999999;
	}
	
	.popupPage {
		width: 100%;
		background-color: #ffffff;
		border-radius: 16rpx 16rpx 0 0;
		box-sizing: border-box;
	}
	
	.popupPage .popupHead {
		height: 70rpx;
		width: 100%;
		border-bottom: 1rpx solid #efefef;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		box-sizing: border-box;
	}
	
	.popupPage .popupHead>view {
		/* width: 20%; */
		height: 70rpx;
		margin: 0 20rpx;
		line-height: 70rpx;
		font-size: 30rpx;
		letter-spacing: 2rpx;
		box-sizing: border-box;
	}
	
	.popupPage .popupContent {
		width: 100%;
		height: 84vh;
		box-sizing: border-box;
		background-color: rgba(245, 245, 245, 1);
		border-bottom: 1rpx solid #efefef;
	}
	
	.content {
		width: 100%;
		height: 100%;
		overflow: auto;
	}
	
	.ischooseBlock{
		width: 100%;
		min-height: 240rpx;
		box-sizing: border-box;
		padding: 10rpx 20rpx;
	}
	
	.notchooseBlock{
		width: 100%;
		min-height: 240rpx;
		box-sizing: border-box;
		padding: 10rpx 20rpx;
	}
	
	.blockTitle{
		width: 100%;
		height: 60rpx;
		line-height: 50rpx;
		font-size: 30rpx;
		font-weight: 500;
		color:rgba(150, 150, 150, 1);
		display: flex;
		justify-content: space-between;
	}
	
	.blockContent{
		width: 100%;
		min-height: 200rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: start;
	}
	
	.contentItem{
		width: 173rpx;
		height: 173rpx;
		margin: 1rpx;
		border-radius: 8rpx;
		position: relative;
		background-color: rgba(255, 255, 255, 1);
		text-align: center;
		line-height: 173rpx;
		font-size: 28rpx;
		color: rgba(78, 60, 117, 0.7);
	}
	
	.delBtn{
		position: absolute;
		top: 8rpx;
		right: 8rpx;
		width: 30rpx;
		height: 30rpx;
		border-radius: 4rpx;
		background-color: rgba(255, 47, 6, 0.2);
		font-size: 40rpx;
		font-weight: 500;
		text-align: center;
		line-height: 24rpx;
		color: rgba(255, 47, 6, 1);
		box-sizing: border-box;
		padding-left: 2rpx;
	}
	
	.addBtn{
		position: absolute;
		top: 8rpx;
		right: 8rpx;
		width: 30rpx;
		height: 30rpx;
		border-radius: 4rpx;
		background-color: rgba(0, 132, 255, 0.2);
		font-size: 40rpx;
		font-weight: 500;
		text-align: center;
		line-height: 24rpx;
		color: rgba(0, 132, 255, 1);
		box-sizing: border-box;
		padding-left: 2rpx;
	}
	
	.topBtn{
		position: absolute;
		top: 8rpx;
		left: 8rpx;
		width: 30rpx;
		height: 30rpx;
		border-radius: 4rpx;
		background-color: rgba(38, 255, 5, 0.2);
		font-size: 30rpx;
		font-weight: 500;
		text-align: center;
		line-height: 30rpx;
		color: rgba(38, 255, 5, 1.0);
	}
	
	.bomBtn{
		position: absolute;
		top: 8rpx;
		left: 8rpx;
		width: 30rpx;
		height: 30rpx;
		border-radius: 4rpx;
		background-color: rgba(216, 175, 23, 0.2);
		font-size: 30rpx;
		font-weight: 500;
		text-align: center;
		line-height: 30rpx;
		color: rgba(216, 175, 23, 1.0);
	}
</style>
